<template>
  <div id="index">
    <div id="container" ref="container"></div>
  </div>
</template>

<script>
import {Graph, Shape} from '@antv/x6'
import { deal } from "@/utils/dealShow";
export default {
  data() {
    return {
      graph: {}
    };
  },
  mounted() {
    this.init();
    //启用键盘监听事件 按下esc返回编辑页面
    let that = this
    document.addEventListener("keydown",function(e){
      if (e.code === 'Escape'){
        that.$router.push({
          path: "/topoedit",
          name: "topoedit"
        })
      }
    })
  },
  methods: {
    init(){
      let svgInfo = JSON.parse(localStorage.getItem("svgInfo"));
      this.graph = new Graph({
        container: this.$refs.container,
        autoResize:true,
        grid: true,
        mousewheel:{
          enabled:true,
          zoomAtMousePosition:false,
        },
        connecting: {
          router: 'manhattan',
          connector: {
            name: 'rounded',
            radius: 8
          },
          snap: {
            radius: 20,
          },
          createEdge() {
            return new Shape.Edge({
              attrs: {
                line: {
                  stroke: 'white',
                }
              }
            })
          }
        },
        panning: {
          enabled: true
        },
        translating:{
          restrict: true
        }
      })
      this.graph.fromJSON(svgInfo)
      let x = document.documentElement.clientWidth/2;
      let y = document.documentElement.clientHeight/2;
      this.graph.translate(x,y)

      this.graph.on('node:contextmenu',({cell})=>{
        deal(this.graph.toJSON(),cell,this.graph)
      })
    },
  },
};
</script>
<style scoped lang="less">
#index{
  width: 100%;
  height: 100%;
  background: black;
}

/deep/ .x6-port-body{
  visibility: hidden;
}
/deep/ .x6-cell rect{
  visibility: hidden;
}
</style>